import React, {Component} from 'react'
import {TabBar} from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'

function mapStateToProps(state, props) {
  return {
    unread: state.unread
  }
}
@withRouter
@connect(mapStateToProps)
class TabBarLayout extends Component {

  render() {
    const selectedTab = this.props.location.pathname
    const {history, unread} = this.props

    return (
      <TabBar
        noRenderContent
      >
        <TabBar.Item
          title="消息"
          key="/"
          icon={<i className="riconfont ricon-xiaoxi" />}
          selectedIcon={<i className="riconfont ricon-xiaoxi" />}
          selected={selectedTab === '/'}
          badge={unread}
          onPress={() => {
            history.replace('/')
          }} />
        <TabBar.Item
          title="联系人"
          key="/contact"
          icon={<i className="riconfont ricon-lianxiren" />}
          selectedIcon={<i className="riconfont ricon-lianxiren" />}
          selected={selectedTab.indexOf('/contact') === 0}
          onPress={() => {
            history.replace('/contact')
          }} />
        <TabBar.Item
          title="我的"
          key="/user"
          icon={<i className="riconfont ricon-wode" />}
          selectedIcon={<i className="riconfont ricon-wode" />}
          selected={selectedTab.indexOf('/user') === 0}
          onPress={() => {
            history.replace('/user')
          }} />
      </TabBar>
    )
  }
}

export default TabBarLayout
